<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>消消乐</title>
    <style>
      .fangkuai {
        position: absolute;
        width: 50px;
        height: 50px;
        display: block;
      }
    </style>
  </head>
  <body>
    <div id="yidian"></div>
    <script>
      var yidian = 0;
      document.getElementById("yidian").textContent =
        "你已点击：" + yidian + "个(不能超过4个)";

      var fangkuaishuliang = (Math.floor(Math.random() * 4) + 2) * 3;
      var checkshuzu = [];
      var okshuzu = [];
      var checkshuzu2 = [];
      var okshuzu2 = [];
      function checkRed(id) {
        yidian++;
        var b = 0;
        var red = document.getElementById(id);
        checkshuzu.push(id);
        for (var a = 0; a <= fangkuaishuliang; a++) {
          var aaa = checkshuzu.includes("red" + a);
          // console.log(aaa);
          if (aaa) {
            okshuzu.push("red" + a);
            b++;
            //console.log(b);
            if (b === 3) {
              yidian = 0;
              console.log(okshuzu);
              for (var c = 0; c < okshuzu.length; c++) {
                document.getElementById(okshuzu[c]).style.display = "none";
              }
              okshuzu.length = 0;
              checkshuzu.length = 0;
              var b = 0;
            }
          }
        }
        if (yidian >= 4) {
          alert("失败");
        }
        document.getElementById("yidian").textContent =
          "你已点击：" + yidian + "个(不能超过4个)";
        //console.log(checkshuzu);
      }

      function checkBlack(id) {
        yidian++;
        var b = 0;
        var black = document.getElementById(id);
        checkshuzu2.push(id);
        for (var a = 0; a <= fangkuaishuliang; a++) {
          var aaa = checkshuzu2.includes("black" + a);
          // console.log(aaa);
          if (aaa) {
            okshuzu2.push("black" + a);
            b++;
            //console.log(b);
            if (b === 3) {
              yidian = 0;
              console.log(okshuzu2);
              for (var c = 0; c < okshuzu2.length; c++) {
                document.getElementById(okshuzu2[c]).style.display = "none";
              }
              okshuzu2.length = 0;
              checkshuzu2.length = 0;
              var b = 0;
            }
          }
        }
        if (yidian >= 4) {
          alert("失败");
        }
        document.getElementById("yidian").textContent =
          "你已点击：" + yidian + "个(不能超过4个)";
        //console.log(checkshuzu2);
      }
      var htmlwrite = " ";
      for (var i = 1; i <= fangkuaishuliang; i++) {
        var Max = 700;
        var Min = 100;

        htmlwrite += `<div id="red${i}" class='fangkuai'
      style=
      'top: ${Math.random() * (Max - Min) + Min}px;
      left: ${Math.random() * (Max - Min) + Min}px;
      background-color: rgb(221, 59, 59);'
      onclick="checkRed('red${i}')"></div>`;
        htmlwrite += `<div id="black${i}" class='fangkuai';
      style=
      'top: ${Math.random() * (Max - Min) + Min}px;
      left: ${Math.random() * (Max - Min) + Min}px;
      background-color: black;'
      onclick="checkBlack('black${i}')"></div>`;
      }     
      document.write(htmlwrite);
    </script>
  </body>
</html>
